<template>
	<view class="page">
		<view class="title">
			3.9.【购物车案例】for循环为什么使用key
		</view>
		<view class="p">
			<view class="cartlist box">
				<view class="cartheader flex center">
					<checkbox>all</checkbox>
					<view class="grid four item" style="text-align: center;">
						<view class="">
							商品名称
						</view>
						<view class="">
							价格
						</view>
						<!-- <view class="">
							小计
						</view> -->
						<view class="">
							操作
						</view>
					</view>
				</view>
				<checkbox-group @change="checkOnChange">
					<view class="item flex center" v-for="(item, index) in cartlist" :key="item.id">
						<checkbox :value="item.id" :checked="item.checked"></checkbox>
						<view class="flex center item" style="text-align: center;">
							<view class="name item" style="text-align: left;">
								{{ item.title }} - {{ item.price }}元
							</view>
							<!-- <view class="">
								<uni-number-box v-model="item.quantity" @change="bindChange(item.id)"></uni-number-box>
							</view> -->
							<view class="getprice">
								{{ item.price}}元
							</view>
							<view class="">
								<text @click="del(item.id)" class="red">删除</text>
							</view>
						</view>
					</view>
				</checkbox-group>
				<view class="footer">
					共计选中 {{ totalNumber }} 个商品，总价：{{ totalPrice }}元
				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue'
	// 购物车商品列表
	const cartlist = ref([{
			id: "1",
			price: 2888,
			title: "小米14",
			checked: false,
			img: "common/images/phone1.png",
			quantity: 1 // 新增商品数量属性
		},
		{
			id: "2",
			price: 2888,
			checked: false,
			title: "iphone 15",
			img: "common/images/phone2.webp",
			quantity: 1
		},
		{
			id: "3",
			price: 3188,
			checked: false,
			title: "oppofind X ",
			img: "common/images/phone3.webp",
			quantity: 1
		},
		{
			id: "4",
			price: 2888,
			checked: false,
			title: "vivo X100",
			img: "common/images/phone4.png",
			quantity: 1
		},
		{
			id: "5",
			price: 2888,
			checked: false,
			title: "华为 Mate 8",
			img: "common/images/phone5.png",
			quantity: 1
		}
	])

	// 项目删除
	const del = (itemId) => {
		// 从 cartlist 中删除商品
		cartlist.value = cartlist.value.filter(item => item.id !== itemId);
		// 从 selectlist 中移除已删除商品的 id
		selectlist.value = selectlist.value.filter(id => id !== itemId);
		// 更新 cartlist 中商品的选中状态
		cartlist.value.forEach(item => {
			item.checked = selectlist.value.includes(item.id);
		});
	}

	const bindChange = (itemId, value) => {
		// 找到对应的商品并更新数量
		const item = cartlist.value.find(item => item.id === itemId);
		if (item) {
			item.quantity = value;
		}
	}

	// 选中商品数量 首先要使用 checkbox-group 包裹 checkbox 并给  checkbox 赋值才能使用
	const selectlist = ref([])
	const totalNumber = computed(() => selectlist.value.length)
	// 计算总价
	const totalPrice = computed(() => {
		return cartlist.value
			.filter(item => item.checked)
			.reduce((prev, curr) => prev + curr.price * curr.quantity, 0)
	})
	// checkOnChange事件是包含在checkbox-group内，所以每个checkbox点击都会触发这个事件
	const checkOnChange = (e) => {
		console.log(e); // 可以打印看一下E的输出 
		selectlist.value = e.detail.value // 返回的e里面会获取到点击的第几个数据，并根据checkbox赋值的内容最终获得一个数组，并将这个数组赋值给selectlist
		cartlist.value.forEach(item => {
			// 	item.checked = true  ----------解读  forEach循环遍历每一个item 如果这里将item.checked 设置为 true 就会导致第一次点击全部的item都会被选中
			item.checked = selectlist.value.includes(item
				.id) // includes() 方法用于判断数组中是否包含某个指定的元素，如果包含，则方法返回 true，否则返回 false。
		})
	}
</script>

<style lang="scss" scoped>
	.name {
		font-size: 28rpx;
	}
</style>